<template>
	<view class="itu-jitter-dot-wrap">
		<template v-if="!isTimeout">
			<view class="itu-jitter-dot itu-jitter-dot__one" :style="[{background: defaultColor}]"></view>
			<view class="itu-jitter-dot itu-jitter-dot__two" :style="[{background: defaultColor}]"></view>
			<view class="itu-jitter-dot itu-jitter-dot__three" :style="[{background: defaultColor}]"></view>
		</template>
		<template v-else>
			<view class="itu-jitter-dot__text" :style="[textStyle]">
				<text v-if="!$slots.text">{{text}}</text>
				<slot name="text"></slot>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name: "itu-jitter-dot",
		props: {
			themeColor: {
				type: String,
				default: ''
			},
			delay: {
				type: Number,
				default: 10 * 1000
			},
			text: {
				type: String,
				default: "连接超时，请稍后重试"
			},
			textStyle: {
				type: Object
			}
		},
		data() {
			return {
				defaultColor: "",
				interval: null,
				isTimeout: false
			};
		},
		mounted() {
			this.defaultColor = this.themeColor || this.$itu.color.primary;
			this.setInterval();
		},
		destroyed() {
			this.clearInterval();
		},
		methods: {
			show(){
				this.clearInterval();
				this.isTimeout = false;
				this.setInterval();
			},
			hide(){
				this.clearInterval();
				this.isTimeout = true;
			},
			setInterval() {
				this.clearInterval();
				this.interval = setInterval(() => {
					this.isTimeout = true;
					clearInterval(this.interval);
					this.$emit("timeout")
				}, this.delay)
			},
			clearInterval() {
				this.isTimeout = false;
				if (this.interval) clearInterval(this.interval);
			}
		}
	}
</script>

<style lang="scss">
	.itu-jitter-dot {
		background: #fff;
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		margin: 6rpx;

		&-wrap {
			display: flex;
			align-items: center;
		}

		&__one {
			animation: jitter 1.6s -0.32s linear infinite;
		}

		&__two {
			animation: jitter 1.6s -0.16s linear infinite;
		}

		&__three {
			animation: jitter 1.6s linear infinite;
		}

		&__text {
			font-size: 28rpx;
		}
	}

	@keyframes jitter {

		0%,
		80%,
		100% {
			-webkit-transform: scale(0);
			transform: scale(0);
		}

		40% {
			-webkit-transform: scale(2.0);
			transform: scale(2.0);
		}
	}
</style>